import React, { Component } from 'react';
import { Table, Divider, Spin, Input, Row, Col, Button, Modal } from 'antd';
import BaseForm from '../BaseForm/index.jsx';
import pagination from '../../utils/pagination.js';
import './index.less';

const Search = Input.Search;

export default class ExTable extends Component {
  state = {
    selectedRowKeys: [],
  }

  selectedRows = []

  handleChange = (selectedRowKeys, selectedRows) => {
    this.selectedRows = selectedRows;
    this.setState({
      selectedRowKeys 
    }, () => {
      const { onSelectedRows } = this.props;
      onSelectedRows && onSelectedRows(this.selectedRows)
    });
  }

  getRowSelection = () => {
    const { selectedRowKeys } = this.state;
    const { selectMode } = this.props;
    return {
      selectedRowKeys,
      type: selectMode,
      onChange: this.handleChange,
      hideDefaultSelections: true,
    };
  }

  handleOnRow = (record, index) => {
    const { rowKey } = this.props;
    return {
      onClick: () => {
        const { selectedRowKeys} = this.state;
        const key = rowKey ? record[rowKey] : index;
        let tempArr = null;
        if (selectedRowKeys.includes(key)) {
          const i = selectedRowKeys.indexOf(key);
          tempArr = selectedRowKeys.filter((item, index) => index !== i);
          this.selectedRows.splice(i, 1);
        } else {
          tempArr = selectedRowKeys.concat(key);
          this.selectedRows.push(record);
        }
        this.setState({
          selectedRowKeys: tempArr
        }, () => {
          const { onSelectedRows } = this.props;
          onSelectedRows && onSelectedRows(this.selectedRows)
        });
      }
    }
  }

  getPagination = () => {
    const { paginationCfg={} } = this.props;
    const { data, onChange } = paginationCfg;
    if (data) {
      // data = {
      //   pageNum: 1,
      //   pageSize: 20,
      //   totalRows: 50
      // }
      return pagination(data, {
        onPageNumChange: (...rest) => {
          onChange && onChange(...rest);
        },
        onPageSizeChange: (...rest) => {
          onChange && onChange(...rest);
        }
      });
    }
    return false;
  }

  getToolBar = () => {
    const { toolBarCfg = {} } = this.props;
    const { leftContent, rightContent } = toolBarCfg;
    let component = null;
    let leftComponent = leftContent;
    let rightComponent = rightContent;
    if (leftContent && leftContent.length) {
      leftComponent = leftContent.map((item, index) => {
        const { label, onClick, ...rest } = item;
        return (
          <Button style={{ marginRight: '10px' }} key={index} onClick={() => { onClick && onClick(this.selectedRows) }} {...rest}>{label}</Button>
        );
      });
    }
    if (leftComponent || rightComponent) {
      component = (
        <div>
          <Divider style={{ margin: '10px 0'}}/>
          <Row type="flex" justify="space-between" align="middle" style={{marginBottom: '10px'}}>
            <Col>{leftComponent}</Col>
            <Col>{rightComponent}</Col>
          </Row>
        </div>
      );
    }
    return component;
  }

  getColumns = () => {
    const { hasNum, columns=[] } = this.props;
    let numColomns = [{
      title: '序号',
      dataIndex: 'num',
      align: 'center',
      render: (text, record, index) => {
        return index+1;
      }
    }];
    if (hasNum) {
      numColomns = numColomns.concat(columns);
    } else {
      numColomns = columns;
    }
    return numColomns;
  }

  // const rowSelection = {
  //   // type: 'radio',
  //   selectedRowKeys,
  //   onChange: this.onSelectChange,
  //   hideDefaultSelections: true,
  //   selections: [{
  //     key: 'all-data',
  //     text: 'Select All Data',
  //     onSelect: (changableRowKeys) => {
  //       this.setState({
  //         selectedRowKeys: [...changableRowKeys], // 0...45
  //       });
  //     },
  //   }, {
  //     key: 'odd',
  //     text: 'Select Odd Row',
  //     onSelect: (changableRowKeys) => {
  //       console.log(changableRowKeys);
  //       let newSelectedRowKeys = [];
  //       newSelectedRowKeys = changableRowKeys.filter((key, index) => {
  //         if (index % 2 !== 0) {
  //           return false;
  //         }
  //         return true;
  //       });
  //       console.log(newSelectedRowKeys);
  //       this.setState({ selectedRowKeys: newSelectedRowKeys });
  //     },
  //   }, {
  //     key: 'even',
  //     text: 'Select Even Row',
  //     onSelect: (changableRowKeys) => {
  //       let newSelectedRowKeys = [];
  //       newSelectedRowKeys = changableRowKeys.filter((key, index) => {
  //         if (index % 2 !== 0) {
  //           return true;
  //         }
  //         return false;
  //       });
  //       this.setState({ selectedRowKeys: newSelectedRowKeys });
  //     },
  //   }],
  //   onSelection: this.onSelection,
  // };

  render() {
    return (
      <Spin spinning={false}>
        {this.getToolBar()}
        <Table {...this.props} columns={this.getColumns()} onRow={this.handleOnRow} pagination={this.getPagination()} rowSelection={this.getRowSelection()} rowClassName={(record, index) => {
          // if (index % 2 === 0) {
          //   return 'ant-table-odd-row';
          // } else {
          //   return 'ant-table-even-row';
          // }
        }}/>
      </Spin>
    );
  }
}